<div fxLayout="row wrap" fxLayouAlign="space-between center" fxLayoutGap="32px" style="height: 100vh; width: 100%;">



  <app-side-nav
  [isExpanded]="isNavExpanded"
  (onToggleClick)="externalToggleNav($event)"
  [nftDirectory]="nftDirectory"
  [blockChain]="blockChain"
  [nftBaseName]="NftBaseName"
  [nftDescription]="nftDescription"
  [creatorAddress]="creatorAddress"
  [royaltiesFee]="royaltiesFee"
  [collectionName]="collectionName"
  [solanaSymbol]="solanaSymbol"
  [cardanoPolicyId]="cardanoPolicyId"
  [baseImageAddress]="baseImageAddress"
  >

  </app-side-nav>


  <div  style="padding: 64px 32px;" fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="64px">

    <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="64px">

      <div class="raised config-container" fxLayout="column" fxLayoutGap="12px" fxLaoyoutAlign="start start">

        <span class="light-text" style=" font-weight: 600; font-size: 16px;">Config</span>

          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">


            <app-main-button
            buttonText="Select Input Folder"
            (customClick)="loadNftFolderStructure()"
            [disabled]="generating"
            matTooltip="Select input folder with image layer folders"
            style="padding-bottom: 15px;"
            ></app-main-button>

            <div style="font-size: 12px;">
              <mat-form-field appearance="fill">
                <mat-label>Number of NFTs to generate</mat-label>
                <input matInput placeholder="5" type="number" [formControl]="generationLimitControl" required>
                <mat-error *ngIf="generationLimitControl.invalid">Enter valid number</mat-error>
              </mat-form-field>
            </div>
<!--
            <div style="font-size: 12px;">
              <mat-form-field appearance="fill">
                <mat-label>Art base name</mat-label>
                <input matInput placeholder="Art #" type="text" [formControl]="NftBaseName">
                <mat-error *ngIf="NftBaseName.invalid">Enter valid name (max length 100)</mat-error>
              </mat-form-field>
            </div>


            <div style="font-size: 12px;">
              <mat-form-field appearance="fill">
                <mat-label>Blockchain</mat-label>
                <mat-select [formControl]="blockChain">
                  <mat-option value="ethereum">Ethereum</mat-option>
                  <mat-option value="solana">Solana</mat-option>
                  <mat-option value="solana-metaplex">Solana Metaplex</mat-option>
                </mat-select>
                <mat-hint align="end" style="color:#adadad">Used for metadata generation</mat-hint>
              </mat-form-field>
            </div> -->

          </div>
      </div>


      <div fxLayout="column" fxLayoutGap="12px" style="height: 120px">
        <button mat-raised-button color="blueGrad" [disabled]="layers.length <= 0 || layerRarityFormGroup?.invalid || itemRarityFolderRarityFormGroup?.invalid || generating" (click)="generateNfts()">Generate NFTS</button>
        <button mat-raised-button color="warn" [disabled]="!generating" (click)="stopGeneration()">Stop</button>

        <mat-progress-bar
        *ngIf="generating"
        color="primary"
        mode="determinate"
        [value]="100">
        </mat-progress-bar>

        <span *ngIf="generating" class="light-text">Current: {{currentNftImage}} out of {{generationLimitControl.value}}</span>

      </div>
    </div>






    <div fxLayout="row flex" fxLayoutAlign="start start" fxLayoutGap="64px">






        <div [formGroup]="layerRarityFormGroup" *ngIf="layerRarityFormGroup" class="layer-weighting">


          <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start center">

            <strong class="light-text" style="padding-bottom: 1em; font-size: 1.17em;">Layer Order</strong>

            <mat-icon  style="font-size: 12px; cursor: default; color: #adadad" matTooltip='Give an order to your layers. "1" will be placed first and "5" will be last in the image.'>help_outline</mat-icon>

          </div>



          <div cdkDropList class="example-list" *ngIf="nftDirectory?.layers" fxLayout='column' fxLayoutGap='6px' (cdkDropListDropped)="drop($event)">
            <div *ngFor="let layer of layers;let i = index;" fxLayout="row" fxLayoutGap='12px' fxLayoutAlign="space-between center" cdkDrag class="example-box" [cdkDragDisabled]="generating">


              <span class="light-text" style="font-weight: 600; font-size: 1rem; padding-bottom: 15px;">{{i+1}}</span>


              <div style="font-size: 12px;">
                <mat-form-field appearance="fill" [style.width.px]=150>
                  <mat-label>{{layer.split('_').join(' ') | titlecase}}</mat-label>
                  <input matInput placeholder="5" type="number"  [formControlName]="layer"  required min="0" max="100" (change)="setNftFolderRarities()">
                  <span matSuffix class="light-text">%</span>
                </mat-form-field>
              </div>


            </div>
          </div>
        </div>






      <div [formGroup]="itemRarityFolderRarityFormGroup" *ngIf="itemRarityFolderRarityFormGroup" class="layer-weighting">



        <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start center">

          <strong class="light-text" style="padding-bottom: 1em; font-size: 1.17em;">Rarity Percentage </strong>

          <mat-icon style="font-size: 12px; cursor: default; color:#adadad" matTooltip="Rarity probabilities must add up to 100%">help_outline</mat-icon>

        </div>


        <div *ngIf="commonItemRarityFolders" fxLayout='column' fxLayoutGap='24px' class="example-list" style="width: 164px;">

          <div  *ngFor="let rarityFolder of commonItemRarityFolders;" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap='12px' class="example-box" style="cursor: default;">


            <div style="font-size: 12px;">
              <mat-form-field appearance="fill" [style.width.px]=150>
                <mat-label>{{rarityFolder.split('_').join(' ') | titlecase}}</mat-label>
                <input matInput placeholder="5" type="number" [formControlName]="rarityFolder"  required min="0" max="100" (change)="setNftFolderRarities()">
                <span matSuffix class="light-text">%</span>
              </mat-form-field>
            </div>

          </div>
        </div>

      </div>



      <div fxLayout="column" fxLayoutGap="32px"  *ngIf="layerRarityFormGroup && itemRarityFolderRarityFormGroup" style="max-width: 500px;">

        <strong class="light-text" style="margin-top: 0; font-size: 1.17em;">Preview: {{NftBaseName.value}}{{currentNftImage}}</strong>

        <img [src]="randomImageUrl" style="background-color: #1C1922; height: 500px; width: 500px; border-radius: 15px;">

        <app-main-button
        buttonText="Random"
        (customClick)="populateRandomImage()"
        [disabled]="generating"
        matTooltip="Generate a random preview image (does not save image)"
        ></app-main-button>

      </div>

    </div>

  </div>


</div>
